<div class="apps-grid" data-test-themes-list>
{{#if this.sortedThemes}}

    {{#each this.sortedThemes as |theme|}}
    <div class="apps-grid-cell" data-test-theme-id="{{theme.name}}" data-test-theme-active="{{theme.active}}">
        <div class="apps-card-app {{if theme.active "theme-list-item--active"}}">
            <div class="apps-card-left">
                <div class="apps-card-meta">
                    <h3 class="apps-card-app-title" data-test-theme-title>{{theme.label}}</h3>
                    <p class="apps-card-app-desc" data-test-theme-description><span class="description">Version {{theme.version}}</span></p>
                </div>
            </div>
            <div class="apps-card-right">
                <div class="apps-configured">
                    {{!--Delete--}}
                    {{#if theme.isDeletable}}
                        <a href="#" {{action this.deleteTheme theme}} disabled={{theme.active}} class="apps-configured-action red-hover red-bg-hover" data-test-theme-delete-button>Delete</a>
                    {{/if}}
                    {{!--Download--}}
                    <a href="#" {{action this.downloadTheme theme}} class="apps-configured-action darkgrey-hover blue-bg-hover" data-test-theme-download-button>Download</a>
                    {{!--Active Label / Activate Button--}}
                    {{#if theme.active}}
                        <span class="gh-badge gh-badge-black apps-configured-action" data-test-theme-badge>Active</span>
                    {{else}}
                        <a href="#" {{action this.activateTheme theme.model}} class="apps-configured-action apps-configured-action-activate green-hover green-bg-hover" data-test-theme-activate-button>
                            Activate
                        </a>
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
    {{/each}}

{{else}}
    <div class="apps-card-app">
        <div class="apps-card-left">
            <div class="apps-card-meta">
                <h3 class="apps-card-app-title">No themes found</h3>
                <p class="apps-card-app-desc"><span class="description">Please upload a theme to continue</span></p>
            </div>
        </div>
    </div>
{{/if}}
</div>
